import { useTranslation } from 'react-i18next';
import { useMediaPredicate } from 'react-media-hook';
import { MediaQuery } from 'src/constant/Media';
import IcUsdt from 'src/image/ic-usdt.svg';
// import { RebateInfo } from 'src/model/Rebate';
import { bnFormat } from 'src/util/bigNumber';
import style from './Statement.module.scss';

type RebateInfo = any

type Props = {
    info: RebateInfo;
    showEmail?: boolean;
    showCoin?: boolean;
    showDivider?: boolean;
};


const Statement = ({ info, showEmail = false, showCoin = false, showDivider = true }: Props) => {
    const { t } = useTranslation();
    const isBiggerThanMd = useMediaPredicate(MediaQuery.Md);
    const shield = (val: string) => {
        const i = val.indexOf("@")
        if (i == -1) return
        return val.replace(val.slice(i - 4, i), "****")
    }
    if (isBiggerThanMd)
        return (
            <>
                <div className={style.row}>
                    {showEmail && <div>{shield(info?.FMail)}</div>}
                    {!showEmail && <div />}
                    <div>{info?.SumSell}</div>
                    <div>{info?.SumDisc}</div>
                </div>
                {showDivider && <div className={style.divider} />}
            </>
        );

    return (
        <>
            {showCoin && (
                <div className={style.head}>
                    <img src={IcUsdt} />
                    <div className={style.coin}>USDT</div>
                </div>
            )}
            <div className={style.content}>
                {showEmail && <div className={style.email}>
                    {shield(info?.FMail)}
                </div>}
                <div className={style.item}>
                    <div>
                        <div className={style.key}>贩售</div>
                        <div>{info?.SumSell}</div>
                    </div>
                    <div>
                        <div className={style.key}>返佣</div>
                        <div>{info?.SumDisc}</div>
                    </div>
                </div>
                {showDivider && <div className={style.divider} />}
            </div>
        </>
    );
};

export default Statement;
